<template>
	<view class="page">
		<!-- 遍历设备类型分组 -->
		<view v-for="(group, type) in groupedDevices" :key="type" class="device-group">
			<!-- 分组标题 -->
			<uni-section :title="type" type="line">
				<!-- 卡片列表：Grid布局，一行固定2列 -->
				<view class="device-grid">
					<uni-card v-for="device in group" :key="device.id" :title="device.name" :isShadow="true"
						class="device-card">
						<!-- 左右布局 -->
						<view class="card-row">
							<!-- 左边：空调额外信息 -->
							<view v-if="device.type === '空调'" class="ac-info">
								<view class="temperature-row">
									<text class="temperature-label">温度：</text>
									<text class="temperature-value">{{ device.temperature }}℃</text>
								</view>
								<view class="mode-row">
									<text class="mode-label">模式：</text>
									<text class="mode-value">{{ device.mode }}</text>
								</view>
								<view class="speed-row">
									<text class="speed-label">风速：</text>
									<text class="speed-value">{{ device.speed }}</text>
								</view>
							</view>
				
							<!-- 右边：状态字段 -->
							<text class="status-text" :class="statusClass(device)">
								{{ statusText(device) }}
							</text>
						</view>
					</uni-card>
				</view>
			</uni-section>

			
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'

	const devices = ref([{
			id: 1,
			type: '空调',
			name: '空调1号',
			status: 'open',
			temperature: 26,
			mode: '制冷',
			speed: '中风速'
		},
		{
			id: 2,
			type: '空调',
			name: '空调2号',
			status: 'close',
			temperature: 24,
			mode: '加热',
			speed: '自动风速'
		},
		{
			id: 7,
			type: '空调',
			name: '空调7号',
			status: 'close',
			temperature: 24,
			mode: '加热',
			speed: '自动风速'
		},
		{
			id: 3,
			type: '天窗',
			name: '天窗A',
			status: '展开'
		},
		{
			id: 4,
			type: '天窗',
			name: '天窗B',
			status: '停止'
		},
		{
			id: 5,
			type: '风机',
			name: '风机1号',
			status: 'open'
		},
		{
			id: 6,
			type: '风机',
			name: '风机2号',
			status: 'close'
		}
	])

	// 按类型分组
	const groupedDevices = computed(() => {
		const groups = {}
		devices.value.forEach(d => {
			if (!groups[d.type]) {
				groups[d.type] = []
			}
			groups[d.type].push(d)
		})
		return groups
	})

	// 状态样式
	function statusClass(device) {
		if (device.type === '空调' || device.type === '风机') {
			return device.status === 'open' ? 'status-open' : 'status-close'
		}
		if (device.type === '天窗') {
			if (device.status === '展开') return 'status-open'
			if (device.status === '合拢') return 'status-close'
			return 'status-stop'
		}
		return ''
	}

	// 状态文字
	function statusText(device) {
		if (device.type === '空调' || device.type === '风机') {
			return device.status === 'open' ? '开启' : '关闭'
		}
		if (device.type === '天窗') {
			return device.status
		}
		return ''
	}
</script>

<style scoped lang="scss">
	.page {
		// padding: 20rpx;
		// min-height: 100vh;

		.device-group {
			// margin-bottom: 30rpx;
			.device-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr); // 一行固定2列

				.device-card {
					.card-row {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						// margin-top: 10rpx;
					}

					.ac-info {
						display: flex;
						flex-direction: column;
						// gap: 6rpx;

						.temperature-label,
						.mode-label,
						.speed-label {
							font-size: 24rpx;
							color: #555;
						}

						.temperature-value,
						.mode-value,
						.speed-value {
							font-size: 24rpx;
							font-weight: bold;
							color: #2196f3;
						}
					}

					.status-text {
						font-size: 26rpx;
						font-weight: bold;
					}

					.status-open {
						color: #2e7d32; // 深绿色文字
					}

					.status-close {
						color: #c62828; // 深红色文字
					}

					.status-stop {
						color: #757575; // 灰色文字（天窗停止）
					}
				}
			}


		}
	}
</style>